<template>
  <div class="wrap">
    <Button type="primary" class="import_btn" @click="visible = true">
      导入json
    </Button>
    <Row>
      <Col :span="8" class="container" v-if="showEditor">
        <codemirror class="code" v-model="jsonStr" :readOnly="false" />
      </Col>
      <Col :span="showEditor ? 16 : 24">
        <json-schema-editor
          class="schema"
          :value="tree"
          disabledType
          lang="zh_CN"
          custom
          :showTitle="showTitle"
          :isMock="isMock"
        />
      </Col>
    </Row>
    <!-- 导入 -->
    <a-modal
      v-model="visible"
      title="导入json"
      width="800px"
      height="600x"
      @ok="handleImportJson"
    >
      <div class="code-container">
        <a-tabs default-active-key="1" @change="callback" size="small">
          <a-tab-pane key="1" tab="JSON">
            <codemirror class="code" v-model="importJson" :readOnly="false" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="JSON-SCHEMA" force-render>
            <codemirror
              class="code"
              v-model="importJsonSchema"
              :readOnly="false"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Codemirror from '../Codemirror.vue'
import GenerateSchema from 'generate-schema'
import { Button, Row, Col } from 'ant-design-vue'
export default {
  components: {
    Codemirror,
    Button,
    Row,
    Col,
  },
  props: {
    showEditor: {
      type: Boolean,
      default: false,
    },
    showTitle: {
      type: Boolean,
      default: false,
    },
    isMock: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    jsonStr: {
      get: function () {
        return JSON.stringify(this.tree, null, 2)
      },
      set: function (newVal) {
        this.tree = JSON.parse(newVal)
      },
    },
  },
  data() {
    return {
      importJson: ``,
      importJsonSchema: ``,
      visible: false,
      jsonTabNow: 1,
      tree: {
        root: {
          type: `object`,
          title: `条件`,
          properties: {
            name: {
              type: `string`,
              title: `名称`,
              maxLength: 10,
              minLength: 2,
            },
            appId: {
              type: `integer`,
              title: `应用ID`,
            },
            credate: {
              type: `string`,
              title: `创建日期`,
              format: `date`,
            },
          },
          required: [`name`, `appId`, `credate`],
        },
      },
    }
  },
  methods: {
    handleImportJson() {
      let t = GenerateSchema.json(JSON.parse(this.importJson))
      if (this.jsonTabNow == 2) {
        t = GenerateSchema.json(JSON.parse(this.importJsonSchema))
        delete t.$schema
      }
      this.tree = t
      this.visible = false
    },
    callback(key) {
      this.jsonTabNow = key
    },
  },
}
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.import_btn {
  margin: 10px;
}
.container {
  @height: calc(100vh - 54px);
  height: @height;
  .code {
    height: @height;
    /deep/ .CodeMirror {
      height: 100% !important;
    }
  }
}
.code-container {
  max-height: 600px;
  overflow: auto;
}
.schema {
  flex-grow: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 8px;
  padding: 12px;
}
.vue-codemirror {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: auto;
  border-radius: 6px;
}
</style>
